<template>
  <div class="appendixList">
    <TitleName
      title="文件信息"
      icon="i-carbon-bookmark-filled"
      class="title"
    ></TitleName>
    <!-- table 表格 -->
    <el-table
      ref="tableRef"
      class="mt-20px"
      :data="tableData"
      border
      v-loading="tableLoading"
      stripe
      style="width: 100%"
      :header-cell-class-name="setClass"
    >
      <el-table-column label="文件名">
        <template #default="scope">
          <svg-icon
            v-if="scope.row.origFileName.indexOf('pdf') != -1"
            :icon-class="'file_pdf'"
            class="w-18px h-18px align-middle"
          />
          <svg-icon
            v-else-if="
              scope.row.origFileName.indexOf('rar') != -1 ||
              scope.row.origFileName.indexOf('zip') != -1
            "
            :icon-class="'file_rar'"
            class="w-18px h-18px align-middle"
          />
          <svg-icon
            v-else-if="
              scope.row.origFileName.indexOf('docx') != -1 ||
              scope.row.origFileName.indexOf('doc') != -1
            "
            :icon-class="'file_word'"
            class="w-18px h-18px align-middle"
          />
          <svg-icon
            v-else
            :icon-class="'file_icon'"
            class="w-18px h-18px align-middle"
          />
          <span
            class="ml-5px cursor-pointer"
            style="color: #409eff"
            @click="preview(scope.row.url)"
            >{{ scope.row.origFileName }}</span
          >
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注内容" />
      <el-table-column
        prop="fileSize"
        label="大小"
        width="120"
        align="center"
      />
      <el-table-column
        prop="createBy"
        label="上传人员"
        align="center"
        width="80"
      />
      <el-table-column
        label="上传时间"
        prop="createTime"
        align="center"
        width="180"
      >
        <template #default="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150" align="center">
        <template #default="scope">
          <el-button
            link
            type="primary"
            size="small"
            icon="Download"
            @click="handleDownload(scope.row)"
            >下载</el-button
          >
          <el-button
            link
            type="primary"
            size="small"
            class="text-red-600"
            icon="Delete"
            @click="delFileName(scope.row.fileName)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      class="h-45px"
      v-show="tableTotal > 10"
      :total="tableTotal"
      v-model:page="queryForm.pageNum"
      v-model:limit="queryForm.pageSize"
      @pagination="getList"
    />
  </div>
</template>
<script setup name="AppendixList">
import { reactive, toRefs } from 'vue'
import { delFile } from '@/api/salesManage/contractManage'
import * as Api from '@/api/common/common.js'
import { addDownloadLog } from '@/api/fileManage'
import { viewFile } from '@/utils/commo'
const { proxy } = getCurrentInstance()
const props = defineProps({
  // 查询参数
  tableParam: {
    required: true
  }
})
const data = reactive({
  tableLoading: false,
  tableTotal: 0,
  queryForm: {
    pageNum: 1,
    pageSize: 10
  },
  tableData: [],
  tableOption: {}
})
const { tableLoading, tableTotal, queryForm, tableData } = toRefs(data)
const lock = ref(0)
watch(
  () => props.tableParam,
  val => {
    init()
  },
  {
    deep: true,
    immediate: true
  }
)
/**
 * 初始化方法
 */
async function init() {
  queryForm.value = { ...queryForm.value, ...props.tableParam }
  await getList()
}
function getList() {
  tableLoading.value = true
  let param = JSON.parse(JSON.stringify(queryForm.value))
  Api.getFileList(param).then(res => {
    tableLoading.value = false
    tableData.value = res.rows
    tableTotal.value = res.total
  })
}
//操作按钮事情
const handleDownload = (row, type) => {
  console.log(row, type, '1234')
  const path = row.url
  window.open(path, '_blank')
  addDownloadLog({ fileId: row.fileId })
}
// 删除文件
async function delFileName(fileName) {
  try {
    proxy.$modal.confirm('是否删除该文件').then(async () => {
      const res = await delFile(fileName)
      if (res.code === 200) {
        proxy.$modal.msgSuccess(res.data)
        getList()
      }
    })
  } catch (error) {
    proxy.$modal.msgError(error)
  }
}

function preview(url) {
  if (url) {
    viewFile(url)
  }
}

// 表头-- 审批状态 添加文字居中类
function setClass({ row, rowIndex }) {
  if (rowIndex === 0) {
    return 'textCenter'
  }
}
</script>

<style scoped>
:deep(.textCenter) {
  text-align: center;
}
</style>
